<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字小游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        input, button {
            padding: 10px;
            margin: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>猜数字小游戏</h1>
    <p>我已经想好了一个1到100之间的数字，你能猜到吗？</p>
    <input type="number" id="guessInput" min="1" max="100" placeholder="输入你的猜测">
    <button onclick="checkGuess()">提交猜测</button>
    <p id="result"></p>

<script>
    // 生成一个1到100之间的随机数
    const randomNumber = Math.floor(Math.random() * 100) + 1;
    let attempts = 0;

    function checkGuess() {
        const userGuess = parseInt(document.getElementById('guessInput').value);
        const resultParagraph = document.getElementById('result');
        attempts++;

        if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
            resultParagraph.textContent = '请输入一个1到100之间的有效数字。';
            return;
        }

        if (userGuess === randomNumber) {
            resultParagraph.textContent = `恭喜你，猜对了！你用了${attempts}次尝试。`;
        } else if (userGuess < randomNumber) {
            resultParagraph.textContent = '太小了，再试一次。';
        } else {
            resultParagraph.textContent = '太大了，再试一次。';
        }
    }
</script>
</body>
</html>